<template>
  <div>
    <div @click="clickBtn" v-if="!pup">
      <slot v-if="$slots.default"></slot>
      <el-button v-else>选择</el-button>
    </div>
    <ElPupBox :pup="pup || pupBox" isBg :json="{
      ...table,
      selectArr: pupBox.tbody,
    }">
      <template v-if="table">
        <TableBox :data="{
          ...table,
          title: table.title || title,
          thead: table.thead.map((el: any) => ({
            ...el,
            templateName: `select_${el.prop}`,
          })),
        }" :isRadio="isRadio" :isShowBtn="isShowBtn" :marign="0" :isCheckbox="isCheckbox" :selectable="selectable"
          @tableRadioBtn="tableRadioBtn" @tableCheckboxBtn="tableCheckboxBtn" @searchBtn="searchBtn">
          <template #[key]="scope" v-for="(slot, key) in $slots" :key="key">
            <template v-if="key === 'search'">
              <slot :name="key" :search="scope.search" />
            </template>
            <template v-else-if="key === 'header'">
              <slot :name="key" :search="scope.search" />
            </template>
            <template v-else>
              <slot :name="key" :row="scope.row" :index="scope.index" :search="scope.search" />
            </template>
          </template>
        </TableBox>
      </template>
      <component :is="typeComponentMap[parameter[type]?.template || type]" isSelect :isRadio="isRadio" :search="{
        ...search,
        ...(parameter[type]?.search || {}),
      }" :thead="parameter[type]?.thead" :selectable="selectable" :isCheckbox="isCheckbox"
        @tableRadioBtn="tableRadioBtn" @tableCheckboxBtn="tableCheckboxBtn" @searchBtn="tableCheckboxBtn([])" v-else />
      <template #footR v-if="isCheckbox">
        <el-button type="primary" :disabled="pupBox.tbody.length === 0" @click="selectBtn(pupBox.tbody)">{{
          `选择(${pupBox.tbody.length})` }}</el-button>
      </template>
    </ElPupBox>
  </div>
</template>
<script setup lang="ts">
const typeComponentMap = { ProductionOrder, ProductManager, EditionAdminKnifeMold, Materiel, Purchase } as any;
import ProductionOrder from '@/views/production/productionOrderNew/index.vue'; //生产订单
import ProductManager from '@/views/business/ProductManager/index.vue'; //生产订单
import EditionAdminKnifeMold from '@/views/productioneditionAdmin/editionAdminKnifeMold/index.vue'; //生产订单
import Materiel from '@/views/warehousewarehouseStting/materiel/index.vue'; // 生产物料
import Purchase from '@/views/purchaseManage/purchaseRequst/index.vue'; // 采购单
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    title?: string;
    data?: any;
    pup?: any;
    isShowBtn?: boolean; //显示操作按钮
    isRadio?: boolean; //单选
    isCheckbox?: boolean; //多选
    selectable?: Function; //禁用多选
    setObj?: any; //选择参数
    search?: any; //搜索条件
    type?: string; //
    table?: any; //常规表单
  }>(),
  {
    title: '申请单列表',
    isRadio: true,
    type: 'ProductionOrder',
  },
);
watch(
  () => props.pup?.state,
  (newVal, oldVal) => {
    if (props.pup.state) {
      pupBox.tbody = [];
    }
  },
);
const parameter: any = {
  Materiel: {
    title: '物料',
    template: 'Materiel',
    //初始搜索条件
    search: {
      state: 1, //已确认
      isShowDisabled: 0, //仅显示未作废的
    },
    thead: [
      {
        label: '规格编号',
        prop: 'specificationCode',
        align: 'center',
        width: 120,
        isCanSearch: true,
      },
      {
        label: '物料名称',
        prop: 'goodsName',
        align: 'left',
        width: null,
        isCanSearch: true,
      },
      {
        label: '规格型号',
        prop: 'specificationName',
        align: 'center',
        width: 100,
        isCanSearch: true,
      },
      {
        label: '物料类型',
        prop: 'goodsTypeName',
        align: 'center',
        width: 80,
      },
      {
        label: '供应商',
        prop: 'supplierName',
        align: 'left',
        width: null,
      },
      {
        label: '单位',
        prop: 'goodsUnit',
        align: 'center',
        width: 80,
      },
      {
        label: '库存数量',
        prop: 'totalStockQuantity',
        align: 'center',
        width: 80,
      },
      {
        label: '批次明细',
        prop: 'details',
        align: 'center',
        width: 80,
      },
    ],
  },
};
const pupBox = reactive({
  state: false,
  typeName: 0,
  title: `选择${props.title}`,
  tbody: [],
});
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'searchBtn'): void;
  (event: 'selectBtn', row: any): void;
}>();
//搜索
const searchBtn = () => {
  if (typeof props.table?.getTbody === 'function') {
    props.table?.getTbody(props.table);
  }
  emit('searchBtn');
};

//多选
const tableCheckboxBtn = (arr: any) => {
  pupBox.tbody = arr;
};
//选择
const selectBtn = (row: any) => {
  let _row = Array.isArray(row) ? row : [row];
  let _setObj: any = props.setObj;
  if (_setObj && typeof _setObj === 'object') {
    _row = _row.map((el: any) => {
      let _newEl: any = {};
      for (let key in _setObj) {
        _newEl[key] = el[_setObj[key]];
      }
      return _newEl;
    });
  }
  emit('selectBtn', _row);
  if (props.pup) {
    proxy.$closePup(props.pup);
  }
  proxy.$closePup(pupBox);
};
//单选
const tableRadioBtn = (row: any) => {
  selectBtn(row);
};
//点击选择按钮
const clickBtn = () => {
  proxy.$openPup(pupBox, 0);
  searchBtn();
};
onMounted(() => { });
onUnmounted(() => { });
</script>
<style scoped lang="scss"></style>
